<template>
    <view class="identityPage">
		<text class="title font20">{{title}}</text>
		
		<view class="selectGroup">
			<block v-for="(item,index) in selects" :key="index">
				<view class="selBtn flex col-theme font16 top-20" @click="changeSel(item.type)">
					<text></text>
					<text>{{item.title}}</text>
					<up-icon name="arrow-right" color="#007235" size="16"></up-icon>
				</view>
			</block>
		</view>
		
		<up-modal :show="showModelTxt" :closeOnClickOverlay="true" @close="showModelTxt=false" @confirm="showModelTxt=false">
			<view class="slot-content">
				<view class="contentWrap flex"  v-if="titList.length > 0">
					<view class="txtWrap flex bg-theme text-center col-fff font20 fontBold">
						<view>
							<view v-for="(item, index) in titList" :key="index">{{ item }}</view>
						</view>
					</view>
				</view>
				<view class="restrictionBg" :class="restrictHouse" v-else></view>
			</view>
		</up-modal>
    </view>
</template>

<script>
	export default {
        data() {
            return {
				title: "请选择多孩家庭户籍状态?",
				restrictHouse: "",
				selects: [
					{
						title: '沪籍',
						type: 'duoHaiIsHuJi'
					},
					{
						title: '非沪籍，持上海居住证且积分达到标准分值',
						type: 'duoHaiNotHuJiAndJiFen'
					}
				],
				showModelTxt: false,
				titList: []
            }
        },
        //分享
        onShareAppMessage(res) {
        	return {
        		title: "上海限购查询，快来测测限购几套",
        		path: `/pages/tools/purchase/identity`,
        	}
        },
        onLoad(options){
        },
		methods:{
			//选择sel
			changeSel(type){
				switch(type){
					case "duoHaiIsHuJi":
					this.titList = ['外环外不限购','外环内限购3套'];
					this.showModelTxt = true;
					break;

					case "duoHaiNotHuJiAndJiFen":
					this.titList = ['外环外不限购','外环内限购3套'];
					this.showModelTxt = true;
					break;

					default:
					break
				}
			}
		}
    }
</script>

<style scoped lang="scss">
	.identityPage{
		text-align: center;
		::v-deep .u-modal__content{
            padding: 0 !important;
            display: block !important;
        }
		.title{
			margin-top: 20vh;
			display: block;
		}
		.selBtn{
			justify-content: space-between;
			border: 1rpx solid $theme-color;
			border-radius: 10rpx;
		}
		.selectGroup{
			padding: 0 40rpx;
		}
		.contentWrap{
			padding: 40rpx 0;
			.txtWrap{
				padding: 20rpx;
				width: 40vw;
				height: 40vw;
				line-height: 1.4;
				border-radius: 50%;
			}
			.pangFigure{
				width: 40vw;
				margin-left: -64rpx;
			}
		}
	}
</style>
